<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五脉排品级</title>
<meta name="Keywords" content="观元山,五脉排品级">
<meta name="description" content="五脉排品级">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" id="viewportId" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="/plugins/layui/css/layui.css"  media="all">
<style>
    .layui-form-item {
        margin-bottom: 0px;
        clear: both;
        *zoom: 1;
    }
    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 6px;
        width: 80px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
</style>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?88aa922ce8a2195ff66e233f5af6121f";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</head>

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
</fieldset>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">阳阴选择：</label>
        <div class="layui-input-block">
            <input type="radio" name="pantype" value="2" title="阳遁" checked="">
            <input type="radio" name="pantype" value="1" title="阴遁">
            <button type="button" lay-submit="" lay-filter="demo1" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-normal">点击计算</button>
        </div>
    </div>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">开元位应盘</label>
        <div class="layui-input-inline">
            <select name="ypname" lay-verify="required" lay-search="">
                <option value="">名称首字母搜索</option>
                <option value="九天">九天(jt)</option>
                <option value="阏缝">阏缝(ef)</option>
                <option value="穷奇">穷奇(qq)</option>
                <option value="饮原">饮原(yy)</option>
                <option value="赤奋若">赤奋若(cfr)</option>
                <option value="天蓬">天蓬(tp)</option>
                <option value="白泽">白泽(bz)</option>
                <option value="梼杌">梼杌(cw)</option>
                <option value="狍鸮">狍鸮(px)</option>
                <option value="提摄格">提摄格(tsg)</option>
                <option value="天芮">天芮(tr)</option>
                <option value="旃蒙">旃蒙(zm)</option>
                <option value="狰">狰(z)</option>
                <option value="槐知">槐知(hz)</option>
                <option value="单阏">单阏(de)</option>
                <option value="太阳">太阳(ty)</option>
                <option value="柔兆">柔兆(rz)</option>
                <option value="狞">狞(n)</option>
                <option value="魑">魑(c)</option>
                <option value="执徐">执徐(zx)</option>
                <option value="天冲">天冲(tc)</option>
                <option value="强围">强围(qw)</option>
                <option value="犬因">犬因(qy)</option>
                <option value="魅">魅(m)</option>
                <option value="大荒落">大荒落(dhl)</option>
                <option value="天辅">天辅(tf)</option>
                <option value="著雍">著雍(zy)</option>
                <option value="亡">亡(w)</option>
                <option value="魍">魍(w)</option>
                <option value="敦祥">敦祥(dx)</option>
                <option value="九地">九地(jd)</option>
                <option value="天禽">天禽(tq)</option>
                <option value="甪端">甪端(ld)</option>
                <option value="蜚瘟">蜚瘟(fw)</option>
                <option value="魉">魉(l)</option>
                <option value="协洽">协洽(xq)</option>
                <option value="天心">天心(tx)</option>
                <option value="屠维">屠维(tw)</option>
                <option value="虚耗">虚耗(xh)</option>
                <option value="鬼车">鬼车(gc)</option>
                <option value="涒滩">涒滩(tt)</option>
                <option value="天柱">天柱(tz)</option>
                <option value="上章">上章(sz)</option>
                <option value="傲狠">傲狠(ah)</option>
                <option value="作噩">作噩(ze)</option>
                <option value="太阴">太阴(ty)</option>
                <option value="昭阳">昭阳(zy)</option>
                <option value="诸怀">诸怀(zh)</option>
                <option value="淹茂">淹茂(ym)</option>
                <option value="天任">天任(tr)</option>
                <option value="重光">重光(zg)</option>
                <option value="九婴">九婴(jy)</option>
                <option value="大渊献">大渊献(dyx)</option>
                <option value="天英">天英(ty)</option>
                <option value="元黓">元黓(yy)</option>
                <option value="飞廉">飞廉(fl)
                <option value="空">空(k)</option>
                <option value="天罡">天罡(tg)</option>
                <option value="朱厌">朱厌(zy)</option>
                <option value="困敦">困敦(kd)</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">开元位甲子</label>
        <div class="layui-input-inline">
            <select name="jzname" lay-verify="required" lay-search="">
                <option value="">名称首字母搜索</option>
                <option value="甲子">甲子(jz)</option>
                <option value="乙丑">乙丑(yc)</option>
                <option value="丙寅">丙寅(by)</option>
                <option value="丁卯">丁卯(dm)</option>
                <option value="戊辰">戊辰(wc)</option>
                <option value="己巳">己巳(js)</option>
                <option value="庚午">庚午(gw)</option>
                <option value="辛未">辛未(xw)</option>
                <option value="壬申">壬申(rs)</option>
                <option value="癸酉">癸酉(gy)</option>
                <option value="甲戌">甲戌(jx)</option>
                <option value="乙亥">乙亥(yh)</option>
                <option value="丙子">丙子(bz)</option>
                <option value="丁丑">丁丑(dc)</option>
                <option value="戊寅">戊寅(wy)</option>
                <option value="己卯">己卯(jm)</option>
                <option value="庚辰">庚辰(gc)</option>
                <option value="辛巳">辛巳(xs)</option>
                <option value="壬午">壬午(rw)</option>
                <option value="癸未">癸未(gw)</option>
                <option value="甲申">甲申(js)</option>
                <option value="乙酉">乙酉(yy)</option>
                <option value="丙戌">丙戌(bx)</option>
                <option value="丁亥">丁亥(dh)</option>
                <option value="戊子">戊子(wz)</option>
                <option value="己丑">己丑(jc)</option>
                <option value="庚寅">庚寅(gy)</option>
                <option value="辛卯">辛卯(xm)</option>
                <option value="壬辰">壬辰(rc)</option>
                <option value="癸巳">癸巳(gs)</option>
                <option value="甲午">甲午(jw)</option>
                <option value="乙未">乙未(yw)</option>
                <option value="丙申">丙申(bs)</option>
                <option value="丁酉">丁酉(dy)</option>
                <option value="戊戌">戊戌(wx)</option>
                <option value="己亥">己亥(jh)</option>
                <option value="庚子">庚子(gz)</option>
                <option value="辛丑">辛丑(xc)</option>
                <option value="壬寅">壬寅(ry)</option>
                <option value="癸卯">癸卯(gm)</option>
                <option value="甲辰">甲辰(jc)</option>
                <option value="乙巳">乙巳(ys)</option>
                <option value="丙午">丙午(bw)</option>
                <option value="丁未">丁未(dw)</option>
                <option value="戊申">戊申(ws)</option>
                <option value="己酉">己酉(jy)</option>
                <option value="庚戌">庚戌(gx)</option>
                <option value="辛亥">辛亥(xh)</option>
                <option value="壬子">壬子(rz)</option>
                <option value="癸丑">癸丑(gc)</option>
                <option value="甲寅">甲寅(jy)</option>
                <option value="乙卯">乙卯(ym)</option>
                <option value="丙辰">丙辰(bc)</option>
                <option value="丁巳">丁巳(ds)</option>
                <option value="戊午">戊午(ww)</option>
                <option value="己未">己未(jw)</option>
                <option value="庚申">庚申(gs)</option>
                <option value="辛酉">辛酉(xy)</option>
                <option value="壬戌">壬戌(rx)</option>
                <option value="癸亥">癸亥(gh)</option>
            </select>
        </div>
    </div>
</div>
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-inline">
            <input type="password" name="pass" lay-verify="pass" value="123456" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
    </div>

</form>

<table id="demo" lay-filter="test"></table>
<!--生成的图片的存放容器-->
<div class="shareImg" id="shareImg" style="display: none"></div>
<div class="s" data-html2canvas-ignore style="display: none">点击保存</div>
</body>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/htmltoimg/js/html2canvas.js"></script>
<script>
    layui.use(['form', 'table'], function(){
        var form = layui.form,
            table = layui.table;


        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{3,12}$/
                ,'密码必须3到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            var datas = data.field;
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 450
                ,url: '/tgqmdj/pjdata?pass='+datas.pass+'&pantype='+datas.pantype+'&jzname='+datas.jzname+'&ypname='+datas.ypname+'' //数据接口
                ,page: false //开启分页
                ,cols: [[ //表头
                    {field:'id', title: 'ID', sort: true, width:60}
                    ,{field: 'zhuguan', title: '主官', width:110}
                    ,{field: 'shiguan', title: '侍官', width:110}
                    ,{field: 'zhuguanYinlv', title: '主官甲子', width:110}
                    ,{field: 'shiguanYinlv', title: '侍官甲子', width: 110}
                    ,{field: 'shengkeguanxi', title: '生克', width: 85, sort: true}
                    ,{field: 'pinjiResult', title: '品级', width: 85, sort: true}
                ]]
            });
            document.getElementById("viewportId").setAttribute('content','width=device-width, initial-scale=0.5, maximum-scale=1,user-scalable=yes');
            return false;
        });


    });

    function saveImage() {

        // 获取想要转换的dom节点
        var dom = document.querySelector('body');
        //var dom = document.getElementById('demo');
        var box = window.getComputedStyle(dom);

        // dom节点计算后宽高
        var width =  parseInt(box.width);
        var height =  parseInt(box.height);

        // 获取像素比
        var scaleBy = getDpr();

        // 创建自定义的canvas元素
        var canvas = document.createElement('canvas');

        // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;

        // 设置canvas css 宽高为DOM节点宽高
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';

        // 获取画笔
        var context = canvas.getContext('2d');

        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);

        // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
        var w = document.getElementById('demo').style.width;
        var h = document.getElementById('demo').style.height;

        html2canvas(dom, {
            allowTaint: true,
            width: w,
            height: h,
            useCORS: true
        }).then(function(canvas) {
            // 将canvas转换成图片渲染到页面上
            var url = canvas.toDataURL('image/png');// base64数据
            var image = new Image();
            image.src = url;
            document.getElementById('shareImg').appendChild(image);
        });
    }

    function getDpr() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }



    (function waterMark(){
        function textBecomeImg(text,fontsize,fontcolor){
            var canvas = document.createElement('canvas');
            $buHeight = 0;
            if(fontsize <= 32){ $buHeight = 99; }
            else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
            else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
            else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
            else if(fontsize > 100 ){ $buHeight = 10;}
            canvas.height=fontsize + $buHeight ;
            canvas.padding=30;
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width*2, canvas.height);
            context.fillStyle = fontcolor;
            context.font=fontsize+"px Arial";
            context.textAlign = "center";
            context.textBaseline = 'middle';
            context.fillText(text,0,fontsize/2);
            var canvasWidth = canvas.width/99;
            canvasWidth = context.measureText(text).width;
            canvas.width = 250;
            canvas.height = 100;
            context.fillStyle = fontcolor;
            context.font=fontsize+"px Arial";
            context.textBaseline = 'middle';
            context.fillText(text,0,fontsize/2);
            var dataUrl = canvas.toDataURL('image/png');
            return dataUrl;
        }
        var text = "观元山";
        var shuiyinDiv = document.createElement('div');
        var style = shuiyinDiv.style;
        style.position = 'absolute';
        style.left = 0;
        style.top = '-60%';
        style.width = '120%';
        style.height = '200%';
        style.opacity = '0.1';
        style.background = "url("+textBecomeImg(text,22,"gray")+")";
        style.zIndex = 9999999991;
        style.transform = "rotate(-30deg)";
        style.pointerEvents = "none";
        document.body.appendChild(shuiyinDiv);
    })();
</script>

</html>
